<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        品牌管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>添加商品
      </p>
      <div class="content">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <div style="padding-top: 20px; float: left">
            <el-col>
              <el-form-item label="采购机构" prop="purchaseName">
                <span>*</span>
                <el-select
                  style="width: 300px"
                  :disabled="sign"
                  v-model="form.purchaseName"
                  placeholder="终端类型"
                  class="filter-item"
                >
                  <el-option
                    v-for="item in channelNameList"
                    :key="item.uid"
                    :label="item.channelName"
                    :value="item.uid"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="采购类型" prop="channelNameValue">
                <el-select
                  style="width: 100%"
                  :disabled="sign"
                  v-model="form.channelNameValue"
                  @change="selectType"
                  placeholder="请选择品牌类型"
                  class="filter-item"
                >
                  <el-option
                    v-for="item in channelTypeLists"
                    :key="item.id"
                    :label="item.typeName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="政策名称" prop="channelType">
                <el-select
                  style="width: 100%"
                  :disabled="sign"
                  v-model="form.channelType"
                  placeholder="请选择品牌类型"
                  class="filter-item"
                >
                  <el-option
                    v-for="item in channelTypeList"
                    :key="item.productType"
                    :label="item.typeName"
                    :value="item.productType"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="终端类型" prop="productNo">
                <el-input
                  v-model="form.productNo"
                  :disabled="sign"
                  placeholder="请输入商品型号"
                ></el-input>
              </el-form-item>
              <el-form-item label="终端价格" prop="productNo">
                <el-input
                  v-model="form.productNo"
                  :disabled="sign"
                  placeholder="请输入商品型号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="购买数量" prop="productName">
                <el-input
                  v-model="form.productName"
                  :disabled="sign"
                  placeholder="请输入购买数量"
                ></el-input>
              </el-form-item>
            </el-col>
          </div>
        </el-form>
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <div style="padding-top: 20px; float: left">
            <el-col>
              <el-form-item label="收货联系人" prop="channelUid">
                <el-input
                  v-model="form.userName"
                  placeholder="请输入联系人姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系人电话" prop="id">
                <el-input
                  v-model="form.phone"
                  placeholder="请输入联系人电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="收获地址" prop="channelType">
                <div style="display: flex; aligin-item: center">
                  <el-cascader
                    style="width: 400px"
                    class="adsInput"
                    size="large"
                    placeholder="请选择省市区"
                    :options="options"
                    v-model="selectedOptions"
                    @change="handleChange"
                  ></el-cascader>
                  <el-input
                    class="detailAddress"
                    placeholder="详细地址"
                    v-model="form.address"
                    style="
                      width: 380px !important;
                      margin-left: 12px;
                      margin-top: 4px;
                    "
                  ></el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="备注" prop="productName">
                <textarea
                  name="remarks"
                  id=""
                  style="width: 612px; border: 1px solid #dcdfe6"
                  rows="10"
                ></textarea>
              </el-form-item>
            </el-col>
          </div>
        </el-form>
        <el-col>
          <div style="display: flex;padding-left:120px">
            <el-button type="primary">确认</el-button>
            <el-button plain>取消</el-button>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
var unitAmts = (rule, value, callback) => {
  var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
  if (value) {
    if (reg.test(value)) {
      return callback();
    } else {
      return callback(new Error("请输入正确的金额"));
    }
  } else {
    return callback(new Error("请输入金额"));
  }
};

export default {
  data() {
    return {
      uploadDisabled: "",
      dialogVisible: false,
      dialogImageUrl: "",
      dialogVisible1: false,
      dialogImageUrl: "",
      httpurl: this.GLOBAL.httpurl,
      // 收货地址
      selectedOptions: [],

      channelNameList: [],
      channelTypeList: [],
      channelTypeLists: [],
      options: regionData, //收货地址
      form: {
        purchaseName: "" //采购机构
      },
      purchaseType:"",
      rules: {
        purchaseName: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ]
      }
    };
  },
  created() {},
  methods: {
    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/8
     * @annotation: 查询品牌类型
     **/
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>
<style scoped>
.con {
  position: relative;
}
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
/* .content {
  width: 100%;
  margin: 60px 20px;
} */
/deep/ .el-select > .el-input {
  width: 300px;
}
/deep/ .el-input__inner {
  width: 300px;
}

.el-form-item {
  width: 450px;
  margin-right: 40px;
}
.el-textarea {
  width: 740px;
}
.el-dropdown {
  margin-top: 6px;
  margin-left: 6px;
}
.el-textarea__inner {
  min-height: 100px !important;
}
.el-button {
  padding: 12px 20px;
}
.buttons {
  float: left;
  margin-top: 80px;
}
/deep/ .el-input__inner {
  width: 240px !important;
}
/deep/ .el-select {
  width: 240px !important;
}
/deep/ .el-input {
  width: 240px !important;
}
/deep/ .detailAddress .el-input__inner {
  width: 360px !important;
}
/deep/ .el-form-item {
  width: 330px !important;
}
</style>
